<template>
    <div class="content">
        <h1 class="text-center">项目收款</h1>
        <el-row :gutter="20" class="mt30">
            <el-col :span="16">项目名称：{{ project.title }}</el-col>
            <el-col :span="8" class="text-right">合同完工期{{ project.end_date }}　<el-text class="cp" @click="isPrint = true">打印</el-text></el-col>
        </el-row>
        <el-table class="mt20" show-summary :data="tableData" :border="true" style="width: 100%;">
            <el-table-column type="index" :index="indexMethod" label="序号" width="60" align="center" />
            <el-table-column prop="invoice_numbers" label="发票号" align="center" />
            <el-table-column prop="created_at" label="开票日期" align="center" />
            <el-table-column prop="price" label="开票金额" align="center" />
            <el-table-column prop="price" label="到账资金" align="center" />
            <el-table-column prop="updated_at" label="到账日期" align="center" />
            <el-table-column label="税率" align="center" width="" >
                <template #default="scope">
                    <el-text v-if="scope.row.project_invoice">{{ scope.row.project_invoice.tax_rate }}</el-text>
                </template>
            </el-table-column>
            <el-table-column prop="tax_price" label="税金合计" align="center" />
            <el-table-column label="发票" align="center" >
                <template #default="scope">
                    <el-button link type="primary" @click="onShow(scope.row.invoice_file)">查看</el-button>
                </template>
            </el-table-column>
            <el-table-column label="备注" align="center" >
                <template #default="scope">
                    <el-text v-if="scope.row.project_invoice">{{scope.row.project_invoice.remarks}}</el-text>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <el-dialog v-model="isPrint" width="900px">
        <div id="print" class="print">
            <h1 class="text-center">项目收款</h1>
            <el-row :gutter="20" class="mt30">
                <el-col :span="16">项目名称：{{ project.title }}</el-col>
                <el-col :span="8" class="text-right">合同完工期{{ project.end_date }}</el-col>
            </el-row>
            <el-table class="custom-header-table mt20" size="small" show-summary :data="tableData" :border="true" style="width: 100%;">
                <el-table-column type="index" :index="indexMethod" label="序号" width="60" align="center" />
                <el-table-column prop="invoice_numbers" label="发票号" align="center" />
                <el-table-column prop="created_at" label="开票日期" align="center" width="110" />
                <el-table-column prop="price" label="开票金额" align="center"  width="100"  />
                <el-table-column prop="price" label="到账资金" align="center" width="100" />
                <el-table-column prop="updated_at" label="到账日期" align="center" width="110" />
                <el-table-column label="税率" align="center" width="60">
                    <template #default="scope">
                        <span v-if="scope.row.project_invoice">{{ scope.row.project_invoice.tax_rate }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="tax_price" label="税金合计" align="center" width="90" />
                <el-table-column label="备注" align="center" >
                    <template #default="scope">
                        <span v-if="scope.row.project_invoice">{{scope.row.project_invoice.remarks}}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="text-center mt30">
            <el-button @click="printElement('print')"> 打印 </el-button>
            <el-button type="info" @click="isPrint = false"> 取消 </el-button>
        </div>
    </el-dialog>

    <el-dialog v-model="isShow" title="文件查看" width="60%">
        <img :src="files" alt="" style="width: 100%;">
    </el-dialog>

</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import http from '../../../../util/request';
import { PrinterService } from '../../../../util/printer'
const printer = new PrinterService()
const indexMethod = (index: number) => {
  return index+= 1
}
const form = ref<any>({search:'',model:'ProjectInvoice',page:0,current:0,total:10,limit:20,loading:false,parentBorder:false})
let project:any = sessionStorage.getItem('project')
project = JSON.parse(project)
const tableData = ref<any[]>([])
const isShow = ref(false)
const isPrint = ref(false)
const files = ref<string>('')

const onGetData = () => {
    
    form.value.loading = true
    tableData.value = []
    http.post('/approve',form.value).then((response:any)=>{
        form.value.loading = false
        response.data.data.forEach((e:any) => {
            if(e.created_at){
                e.created_at = e.created_at.substr(0,10)
            }
            if(e.updated_at){
                e.updated_at = e.updated_at.substr(0,10)
            }
            e.tax_price = e.project_invoice ? e.project_invoice.tax_price : 0
        });
        tableData.value = response.data.data
        form.value.total = response.data.total
    })
}

const printElement = (elementId:string) => {
    if(elementId){
        printer.printElement(elementId, { title: '　' })
        return;
    }
}

const onShow = (data:string) => {
    files.value = data
    isShow.value = true
}

onMounted(()=>{
    onGetData()
})
</script>

<style scoped>
.el-table{border: 1px solid #bbbbbb;margin-top: 5px;}
:deep(.custom-header-table .el-table__header th) {
  font-weight: 300 !important; /* 加粗 */
  color: #000000;
}
el-table .cell {font-size: .7rem !important;padding: 0px 3px;}
.el-text{font-size: .8rem !important;}

.el-table .el-table__header-wrapper th,
.el-table .el-table__body-wrapper td {
  border-color: #bbbbbb !important;
}
</style>